<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        td{
            width: 270px;
            height: 20px;
        }
    </style>
</head>
<body>

<table border="1" id="book_table">
    <tr>
        <td>书名</td>
        <td>价格</td>
    </tr>

    <tr>
        <td>活着</td>
        <td>13</td>
    </tr>

    <tr>
        <td>兄弟</td>
        <td>13</td>
    </tr>
</table>

<div>
    <button type="button" onclick="add_book()">添加一行</button>
    <button type="button" onclick="del_book()">删除一行</button>
</div>

<script>
    function add_book() {
        // alert("添加数据")
        const book_name = prompt("请输入书名");
        const book_price = prompt("请输入价格");
        // 创建新的结点
        const book_tr_node = document.createElement("tr")
        const book_name_td_node = document.createElement("td")
        const book_price_td_node = document.createElement("td")

        let book_table = document.getElementById("book_table");
        book_name_td_node.innerText = book_name;
        book_price_td_node.innerText = book_price;

        book_tr_node.appendChild(book_name_td_node);
        book_tr_node.appendChild(book_price_td_node);

        book_table.appendChild(book_tr_node)

    }
    function del_book() {

        let del_row_num = prompt("请输入您要删除的行数。")
        // alert(del_row_num)

        let book_table = document.getElementById("book_table")
        let childNodes = book_table.childNodes;

        if (del_row_num < 0 || del_row_num > childNodes.length){
            alert("行数不在有效范围内。")
            return;
        } else {
            book_table.deleteRow(del_row_num);
        }
    }
</script>

</body>
</html>
